{% load static %}

{% block title %}



{% endblock %}

{% block head%}

<script>
    let stressResponse = null;

    function toggleStressActivities(answer) {
        const stressActivities = document.getElementById("stress-activities");
        if (answer === "yes") {
            stressActivities.style.display = "block";
        } else {
            stressActivities.style.display = "none";
        }
    }

    function selectStressResponse(answer) {
        stressResponse = answer;
        const yesButton = document.getElementById("stress-yes");
        const noButton = document.getElementById("stress-no");

        // Highlight selected button
        yesButton.classList.toggle("selected", answer === "yes");
        noButton.classList.toggle("selected", answer === "no");

        // Show stress activities if 'yes' is selected
        toggleStressActivities(answer);
    }

    function toggleObservationArea(activityId) {
        const observationArea = document.getElementById(activityId + "-observation");
        observationArea.style.display = "block";
        document.getElementById(activityId + "-button").innerText = "Done";
    }

    function submitForm() {
        // Display success message and hide the form
        document.getElementById("success-message").style.display = "block";
        document.getElementById("form-container").style.display = "none";
    }
</script>

{%endblock%}

{%block css%}
    
    <link rel="stylesheet" href="{% static  'home/input.css' %}">
{%endblock%}

{% block body %}


<div class="container" id="form-container">
    <h1>Daily Activity and Meal Log</h1>
    {% if user.is_authenticated %}
<form method="post">
{% csrf_token %}
    <div class="form-group">
        <label for="date">Select Date:</label>
        <input type="date" id="date" name="date" required>
    </div>

    <div class="form-group">
        <h2>Activities</h2>
        <div class="activities">
            <label>Flexibility
                <input type="checkbox" id="flexibility" name="flexibility" onclick="this.innerText='Done'">Push Done</input>
            </label>
            <label>Muscle Strength
                <input type="checkbox"  id="musclestrengthdone" name="musclestrengthdone"  onclick="this.innerText='Done'">Push Done</input>
            </label>
            <label>Equilibrion
                <input type="checkbox"  id="equilibrion" name="equilibrion"  onclick="this.innerText='Done'">Push Done</input>
            </label>
            <label>Walking
                <input type="checkbox"  id="walking" name="walking"  onclick="this.innerText='Done'">Push Done</input>
            </label>
            <label>Respiration
                <input type="checkbox"  id="respiration" name="respiration"  onclick="this.innerText='Done'">Push Done</input>
            </label>
        </div>
    </div>
    
    <div class="form-group">
        <label>Are you feeling stressed?</label>
        <input id="stress-yes" name="stressed" type="radio" onclick="selectStressResponse('yes')">Yes</input>
        <input id="stress-no" name="stressed" type="radio" onclick="selectStressResponse('no')">No</input>
    </div>

    <!-- Stress-Relief Activities -->
<div id="stress-activities" class="stress-activities" style="display: none;">
    <h2>Stress-Relief Activities</h2>

    <div>
        <label for="body-scan-observation-text">Observations from Body Scan:</label>
        <textarea id="ObservationsfromBodyScan" name="ObservationsfromBodyScan" rows="2"></textarea>
    </div>

    <div>
        <label for="breathing-activity-observation-text">Observations from Breathing Activity:</label>
        <textarea id="ObservationsfromBreathingActivity" name="ObservationsfromBreathingActivity" rows="2"></textarea>
    </div>

    <div>
        <label for="fractional-breathing-observation-text">Observations from Fractional Breathing:</label>
        <textarea id="ObservationsfromFractionalBreathing" name="ObservationsfromFractionalBreathing" rows="2"></textarea>
    </div>

    <div>
        <label for="walking-meditation-observation-text">Observations from Walking Meditation:</label>
        <textarea id="ObservationsfromWalkingMeditation" name="ObservationsfromWalkingMeditation" rows="2"></textarea>
    </div>
</div>

    <h1>Filled Form</h1>
    <div class="note1">
        <p>Report the values in the table below:</p>
    </div>

    <table>
        <thead>
            <tr>
                <th>DAYS</th>
                <th>_</th>
                <th>MONDAY</th>
                <th>TUESDAY</th>
                <th>WEDNESDAY</th>
                <th>THURSDAY</th>
                <th>FRIDAY</th>
                <th>SATURDAY</th>
                <th>SUNDAY</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Walking 30 min</td>
                <td>Step Number</td>
                <td><input id="WalkingMonday" name="WalkingMonday" type="text"></input></td>
                <td><input id="WalkingTuesday" name="WalkingTuesday" type="text"></input></td>
                <td><input id="WalkingWendsday" name="WalkingWendsday" type="text"></input></td>
                <td><input id="WalkingThursday" name="WalkingThursday" type="text"></input></td>
                <td><input id="WalkingFriday" name="WalkingFriday" type="text"></input></td>
                <td><input id="WalkingSaterday" name="WalkingSaterday" type="text"></input></td>
                <td><input id="WalkingSunday" name="WalkingSunday" type="text"></input></td>
            </tr>
            <tr>
                <td>Activity Daily</td>
                <td>Step Number</td>
                <td><input id="ActivityMonday" name="ActivityMonday" type="text"></input></td>
                <td><input id="ActivityTuesday" name="ActivityTuesday" type="text"></input></td>
                <td><input id="ActivityWendsday" name="ActivityWendsday" type="text"></input></td>
                <td><input id="ActivityThursday" name="ActivityThursday" type="text"></input></td>
                <td><input id="ActivityFriday" name="ActivityFriday" type="text"></input></td>
                <td><input id="ActivitySaterday" name="ActivitySaterday" type="text"></input></td>
                <td><input id="ActivitySunday" name="ActivitySunday" type="text"></input></td>
            </tr>
        </tbody>
    </table>


    <h1>Diet</h1>
    <div class="form-group">
        <label for="breakfast">Breakfast:</label>
        <textarea id="Breakfast" name="Breakfast" rows="2"></textarea>
    </div>
    <div class="form-group">
        <label for="lunch">Lunch:</label>
        <textarea id="Lunch" name="Lunch" rows="2"></textarea>
    </div>
    <div class="form-group">
        <label for="dinner">Dinner:</label>
        <textarea id="Dinner" name="Dinner" rows="2"></textarea>
    </div>
    <div class="form-group">
        <label for="middle-day">Middle Day Snack:</label>
        <textarea id="MiddleDaySnack" name="MiddleDaySnack" rows="2"></textarea>
    </div>
    <div class="form-group">
        <label for="out-of-meal">Out of Meal:</label>
        <textarea id="OutofMeal" name="OutofMeal" rows="2"></textarea>
    </div>
    <div class="form-group">
        <label for="supplement">Supplement:</label>
        <textarea id="Supplement" name="Supplement" rows="2"></textarea>
    </div>


    <!-- Submit Button -->
    <button class="submit-btn" type="submit" onclick="submitForm()">Submit</button>
</div>

{% else %}
<br><br>
<h3 style="background-color:#FFC107 ; text-align:center ;  padding-top:15px;padding-bottom:15px;border-radius: 10px"> please Login First </h3>
<br><br>
{% endif %}
</form>
<footer class="navigation-footer">
    <button onclick="window.location.href='{% url 'home:home' %}'">Home</button>
    <button onclick="window.location.href='{% url 'accounts:logout' %}'">Log out</button>
</footer>

{% endblock %}